<template>
    <div>
<!--        面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/goods">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
<!--        卡片区-->
        <el-card>
<!--            搜索框及添加按钮-->
            <el-row>
                <el-col :span="8">
                    <el-input
                            v-model="queryInfo.query"
                            clearable
                            @clear="getGoodsList"
                            placeholder="请输入搜索内容">
                        <template #append>
                            <el-button icon="el-icon-search"
                                       @click="getGoodsList"></el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="$router.push('/goods/add')">添加商品</el-button>
                </el-col>
            </el-row>
            <el-table :data="goodsList">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" min-width="150" align="center"></el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)" min-width="50" align="center"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" min-width="50" align="center"></el-table-column>
                <el-table-column prop="add_time" label="创建时间" min-width="80" align="center">
                    <template #default="scope">
                        {{formatDate(scope.row.add_time)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="120">
                    <template #default="scope">
                        <el-tooltip effect="dark" content="编辑此商品" placement="top">
                            <el-button type="primary"
                                       size="mini"
                                       @click="showEditGoodDialog(scope.row.goods_id)"
                                       icon="el-icon-edit"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除此商品" placement="top">
                            <el-button type="danger"
                                       size="mini"
                                       @click="deleteGood(scope.row.goods_id)"
                                       icon="el-icon-delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
<!--            分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
<!--        添加商品dialog-->
        <el-dialog
                v-model="editGoodDialogVisible"
                :before-close="closeEditGoodDialog"
                title="编辑商品">
            <el-form
                    label-width="100px"
                    label-position="left"
                    :rules="editGoodFormRules"
                    :model="editGoodForm">
                <el-form-item label="商品图片" >
                    <img v-for="item in goodsImg" :src="item" alt="商品图片"
                         style="height: 100px;display: inline-block;margin: 5px;border-radius: 5px"/>
                </el-form-item>
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="editGoodForm.goods_name"/>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                    <el-input v-model="editGoodForm.goods_weight" type="number"/>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                    <el-input v-model="editGoodForm.goods_number" type="number"/>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                    <el-input v-model="editGoodForm.goods_price" type="number"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="closeEditGoodDialog">取消</el-button>
                <el-button type="primary" @click="sureModify">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import timeMixin  from "../../mixin/timeMixin";
  export default {
    name: "GoodList",
    data(){
      return {
        queryInfo:{
          query:'',//搜索关键字
          pagenum:1,
          pagesize:10,
        },//搜索关键字
        total:0,//总条数
        goodsList:[],//商品列表
        editGoodDialogVisible:false,//编辑商品
        goodsImg:[],//商品图片
        editId:'',
        editGoodForm:{//编辑商品的表单
          goods_name:'',
          goods_price:'',
          goods_number:'',
          goods_weight:'',
          goods_cat:'',
        },
        editGoodFormRules:{//编辑商品的表单
          goods_name:[{required:true,message:'请输入新的商品名',trigger:'blur'}],
          goods_price:[{required:true,message:'请输入新的商品价格',trigger:'blur'}],
          goods_number:[{required:true,message:'请输入新的商品数量',trigger:'blur'}],
          goods_weight:[{required:true,message:'请输入新的商品重量',trigger:'blur'}],
        }
      }
    },
    created() {
        this.getGoodsList();
    },
    mixins: [timeMixin],
    methods:{
      //获取商品列表数据
      async getGoodsList(){
          const {data:res} = await this.$http.get('/goods',{params:this.queryInfo});
          console.log(res);
          if(res.meta.status !== 200){
            return this.$message.error(res.meta.msg);
          }else{
            this.goodsList = res.data.goods;
            this.total = res.data.total;
          }
        },

      //分页控制
      handleSizeChange(val){
          this.queryInfo.pagesize = val;
          this.getGoodsList();
      },
      handleCurrentChange(val){
          this.queryInfo.pagenum = val;
          this.getGoodsList();
      },
      //删除商品
      async deleteGood(id){
          const res1 = await  this.$confirm("确定要删除这个商品吗？","警告",{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning',
            align:'center',
          }).catch(err => console.log(err));
          if(res1 !== 'confirm'){
            return this.$message({
              message:'用户取消操作',
              duration:300,
              type:'info'
            })
          }
          const {data:res} = await this.$http.delete(`/goods/${id}`);
          if(res.meta.status !== 200){
            return this.$message.error(res.meta.msg);
          }
          this.$message.success(res.meta.msg);
          this.getGoodsList();
      },
      //编辑商品部分
      showEditGoodDialog(id){
        this.editGoodDialogVisible = true;
        this.editId = id;
        this.getEditGoodInfo();
      },
      closeEditGoodDialog(){
        this.editGoodDialogVisible = false;
        this.goodsImg = [];
        this.editId = '';
      },
      //通过id查询商品信息
      async getEditGoodInfo(){
        const {data:res} = await this.$http.get(`/goods/${this.editId}`);
        if(res.meta.status !== 200){
          return this.$message.error('获取商品信息失败！');
        }
        console.log(res);
        this.editGoodForm.goods_name = res.data.goods_name;
        this.editGoodForm.goods_number = res.data.goods_number;
        this.editGoodForm.goods_price = res.data.goods_price;
        this.editGoodForm.goods_weight = res.data.goods_weight;
        this.editGoodForm.goods_cat = res.data.goods_cat;
        res.data.pics.forEach(item=>{
          this.goodsImg.push(item.pics_sma_url)
        })
      },
      async sureModify(){
        const {data:res} = await this.$http.put(`/goods/${this.editId}`,this.editGoodForm);
        if(res.meta.status !== 200){
          return this.$message.error('修改商品失败');
        }
        console.log(res);
        this.$message.success('修改成功！')
        this.closeEditGoodDialog();
        this.getGoodsList();
      }
    }
  }
</script>

<style scoped>

</style>
